<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style scoped>
    .anime-page {
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    h1 {
      color: #fff;
      text-align: center;
      margin: 0;
      padding: 1rem;
      background-color: #409EFF;
    }
    .anime-section {
      padding: 2rem;
      flex-grow: 1;
    }
    h2 {
      margin: 0;
      padding: 0;
    }
    .anime-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1rem;
    }
    .anime-img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    .anime-caption {
      padding: 1rem;
      text-align: center;
    }
    h3 {
      margin: 0;
      padding: 0;
    }
    .el-footer {
      text-align: center;
      padding: 1rem;
      background-color: #409EFF;
      color: #fff;
    }
  </style>
</head>
<body>
<div id="app">
  <el-header>
    <h1>多部动漫网页</h1>
  </el-header>
  <el-main>
    <div class="anime-section">
      <h2>最新动漫</h2>
      <div class="anime-cards">
        <el-card v-for="(item, index) in latestAnime" :key="index" :body-style="{ padding: '0px' }">
          <img :src="item.imgUrl" class="anime-img" alt="">
          <div class="anime-caption">
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
          </div>
        </el-card>
      </div>
    </div>
    <div class="anime-section">
      <h2>热门动漫</h2>
      <div class="anime-cards">
        <el-card v-for="(item, index) in popularAnime" :key="index" :body-style="{ padding: '0px' }">
          <img :src="item.imgUrl" class="anime-img" alt="">
          <div class="anime-caption">
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
          </div>
        </el-card>
      </div>
    </div>
  </el-main>
  <el-footer>
    <p>山东济南达内中心@马云峰</p>
  </el-footer>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        latestAnime: [
          {
            title: '进击的巨人',
            description: '在这个世界上，人类生活在城墙内，以避免巨人的袭击。',
            imgUrl: 'https://img1.baidu.com/it/u=3651080134,2577152280&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313'
          },
          {
            title: 'JOJO的奇妙冒险',
            description: '一家人的奇妙冒险，世代相传的血脉之战。',
            imgUrl: 'https://img2.baidu.com/it/u=530607613,2912901815&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=718'
          },
          {
            title: '海贼王',
            description: '寻找传说中的One Piece，成为海贼王的男人们的冒险故事。',
            imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Ff1043cf1-da7b-404f-86bc-b12498c66381%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1684068301&t=822435fd85baebe5dbb403a84be88cd2'
          }
        ],
        popularAnime: [
          {
            title: '鬼灭之刃',
            description: '在日本的大正时代，少年炭治郎的家庭被鬼杀害，他决定成为鬼猎人。',
            imgUrl: 'https://img2.baidu.com/it/u=1553314190,2479188555&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666'
          },
          {
            title: '刀剑神域',
            description: '在虚拟现实游戏中，玩家必须通过战斗来逃离游戏。',
            imgUrl: 'https://img2.baidu.com/it/u=3448898242,1864259481&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800'
          },
          {
            title: '命运石之门',
            description: '一位名为岡部倫太郎的大学生，发现了一种可以改变历史的方法。',
            imgUrl: 'https://img2.baidu.com/it/u=2462255602,3453893788&fm=253&fmt=auto&app=138&f=JPEG?w=709&h=500'
          }
        ]
      }
    },
    methods:{

    }
  })
</script>
</html>